<template>
    <div>
        <div style="display: flex; margin-top: 30px;">
            <div class="div-fff">
                <img src="" class="img-tup" />
                <font class="font-xs">使用人数</font>
                <font class="font-count">11</font>
            </div>
            <div class="div-fff">
                <img src="" class="img-tup" />
                <font class="font-xs">提交人数</font>
                <font class="font-count">11</font>
            </div>
            <div class="div-fff">
                <img src="" class="img-tup" />
                <font class="font-xs">浏览次数</font>
                <font class="font-count">22</font>
            </div>
            <div class="div-fff">
                <img src="" class="img-tup" />
                <font class="font-xs">问卷数量</font>
                <font class="font-count">22</font>
            </div>
            <div class="div-fff">
                <img src="" class="img-tup" />
                <font class="font-xs">问卷数量</font>
                <font class="font-count">22</font>
            </div>
        </div>
        <div style="display: flex; margin-top: 30px;">
            <div class="list">
                <div class="echart" ref="mychart" id="main"
                    style="width: 100%;height: 100%;margin-top:50px ;margin-left: 20px;"></div>
            </div>
            <div class="list">
                <div class="echart" ref="mychart" id="main2"
                style="width: 100%;height: 100%;margin-top:50px ;margin-left: 20px;"></div>
            </div>
        </div>
    </div>
</template>
<script>
import { get_history } from '@/api/login'
import * as echarts from "echarts";
export default {
    data() {
        return {

        }
    }, mounted:async function () {
        const res = await get_history();
        console.log(res, ":::");
        this.initEcharts();
    }, methods: {
        initEcharts() {
            var chartDom = document.getElementById('main');
            var myChart = echarts.init(chartDom);
            var option;

            option = {
                title: {
                    text: 'Referer of a Website',
                    subtext: 'Fake Data',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                series: [
                    {
                        name: 'Access From',
                        type: 'pie',
                        radius: '50%',
                        data: [
                            { value: 1048, name: 'Search Engine' },
                            { value: 735, name: 'Direct' },
                            { value: 580, name: 'Email' },
                            { value: 484, name: 'Union Ads' },
                            { value: 300, name: 'Video Ads' }
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };

            option && myChart.setOption(option);

            var chartDom2 = document.getElementById('main2');
            var myChart2 = echarts.init(chartDom2);
            var option2;

            option2 = {
                title: {
                    text: 'Referer of a Website',
                    left: 'center'
                },
                xAxis: {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: [120, 200, 150, 80, 70, 110, 130],
                        type: 'bar'
                    }
                ]
            };

            option2 && myChart2.setOption(option2);
            //随着屏幕大小调节图表
            window.addEventListener("resize", () => { myChart.resize(); });
            window.addEventListener("resize", () => { myChart2.resize(); });
        }
    }
}



</script>
<style>
.content-div {
    border-radius: 5px;
    background-color: #FFFFFF;
    height: calc(100vh - 50px - 90px);
    padding: 8px;
}

.font-xs {
    font-size: 20px;
    display: block;
    text-align: center;
    margin-top: 8px;
}

.font-count {
    display: block;
    text-align: center;
    margin-top: 8px;
}

.font-dd {
    display: block;
    text-align: center;
    margin-top: 10px;
    color: rgba(0, 0, 0, 0.4);
}

.img-tup {
    display: block;
    width: 60px;
    height: 60px;
    margin: 14px auto;
}

.div-fff {
    background-color: white;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
    border-radius: 4px;
    width: 220px;
    height: 145px;
    margin: auto;
}

.list {
    background-color: white;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
    border-radius: 4px;
    width: 570px;
    height: 400px;
    margin: auto;
}
</style>